<!-- 操作日志页面 -->
<template>
    <div>
        <el-row>
            <el-col :span="24">
                <div class="grid-content">
                    <el-input v-model="data.targetAdminId" class="m-2" placeholder="请输入管理ID" clearable />
                    <el-button type="primary" :icon="Search" @click="init">查找</el-button>
                </div>
            </el-col>
        </el-row>
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="id" label="日志ID" />
            <el-table-column prop="adminId" label="管理员ID" />
            <el-table-column prop="requestId" label="请求ID" />
            <el-table-column prop="group" label="API分组" />
            <el-table-column prop="method" label="API方法" />
            <el-table-column label="操作时间">
                <template #default="scope">
                    {{ formatTime(scope.row.gmtCreate) }}
                </template>
            </el-table-column>
        </el-table>
        <Pagination v-bind="pagination" @page-change="handlePageChange" />
    </div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { Search } from '@element-plus/icons-vue';//图标 
import { get } from "@/utils/http"; //封装的axios请求方式
import { formatTime } from "@/utils/time";//时间转化
import { PaginationClass } from "#/index";//分页数据类型

const pagination = ref(new PaginationClass())//分页数据
const tableData = ref(<TypeLog[]>[])//表格数据

let data = ref({ //请求传的数据
    _gp: 'admin.log',
    _mt: 'list',
    targetAdminId: '',//搜索绑定的数据
    page: 1,//当前的页数
    limit: 10//每页显示条数
})

// 挂载时渲染数据
onMounted(() => {
    init()
})

// 渲染事件
function init() {
    get(data.value).then((res) => {
        console.log(res);
        let { data } = res
        tableData.value = data.items;//表格数据赋值
        pagination.value.total = data.total;//总页数赋值
    })
}

// 分页组件里的数据赋值
function handlePageChange(v: any) {
    data.value.page = v.page
    data.value.limit = v.limit
    init()
}

</script>
<style lang="less" scoped>
.el-row {
    margin-bottom: 20px;
}

.grid-content {
    .m-2 {
        width: 300px;
    }

    .el-button {
        margin-left: 30px;
    }
}
</style>